<template>
  <el-dialog
    v-model="dialog.visible"
    title="用户数据权限"
    @open="openHandler"
    @close="closeHandler"
    :close-on-click-modal="false"
    append-to-body
    center
  >
    <el-form ref="dataForm" :model="entity" label-suffix="：">
      <el-row class="padding-lr-20" :gutter="20">
        <el-col :span="12">
          <el-form-item
            prop="userId"
            label="用户"
            :rules="{
              required: true,
              message: '请选择用户',
              trigger: 'blur',
            }"
          >
            <user-select v-model="entity.userId" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            prop="deptId"
            label="部门"
            :rules="{
              required: true,
              message: '请选择部门',
              trigger: 'blur',
            }"
          >
            <dept-tree-select v-model="entity.deptId" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="padding-lr-20" :gutter="20">
        <el-col :span="24">
          <el-form-item
            prop="menuIds"
            label="菜单"
            :rules="{
              required: true,
              message: '请选择菜单',
              trigger: 'blur',
            }"
          >
            <el-tree-select
              v-model="entity.menuIds"
              :data="menus"
              :props="{
                value: 'id',
                label: 'menuName',
              }"
              multiple
              check-strictly
              show-checkbox
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="5"
              value-key="id"
              filterable
              clearable
              placeholder="请选择菜单"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <cancel-button @click="dialog.visible = false" />
      <save-button :loading="loading" @click="saveHandler" />
    </template>
  </el-dialog>
</template>
<script>
import { fetchTree } from '@/api/upms/menu'
import { save } from '@/api/upms/userDataPermission'

export default {
  name: 'UserDataPermissionEdit',
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  emits: ['success'],
  data() {
    return {
      loading: false,
      entity: {},
      menus: [],
    }
  },
  methods: {
    openHandler() {
      this.entity = Object.assign({}, this.dialog.entity)

      fetchTree().then((res) => {
        this.menus = res.data.data
        this.menus.unshift({
          id: 0,
          menuName: '无',
        })
      })
    },
    closeHandler() {
      this.entity = {}
      this.$refs.dataForm.clearValidate()
    },
    saveHandler() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.loading = true
          save(this.entity)
            .then(() => {
              this.dialog.visible = false
              this.$message.success('保存成功')
              this.$emit('success')
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
  },
}
</script>
